<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加解密工具</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="paste-button.css">
    <script>
        // 防止主题闪烁 - 在页面渲染前应用主题
        (function() {
            const theme = localStorage.getItem('global-theme') || 'dark';
            if (theme === 'dark') {
                document.documentElement.classList.add('dark-theme');
            }
        })();
    </script>
    <style>
        .hash-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
        }

        .hash-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .hash-header h1 {
            font-size: 32px;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .hash-header p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 10px;
        }

        .tab-btn {
            padding: 10px 20px;
            background: transparent;
            border: none;
            border-bottom: 1px solid transparent;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-secondary);
            transition: all 0.3s;
        }

        .tab-btn:hover {
            color: #3498db;
        }

        .tab-btn.active {
            color: #3498db;
            border-bottom-color: #3498db;
        }

        .config-panel {
            background: var(--bg-primary);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .config-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .config-item {
            flex: 1;
            min-width: 150px;
        }

        .config-item label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .config-item select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            background: var(--bg-primary);
            color: var(--text-primary);
            cursor: pointer;
        }

        .config-item select:focus {
            outline: none;
            border-color: #3498db;
        }

        .input-area {
            margin-bottom: 30px;
        }

        .input-area textarea {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            font-size: 16px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            resize: vertical;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .results-container {
            background: var(--bg-primary);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .result-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .result-label {
            width: 150px;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .result-value {
            flex: 1;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 15px;
            color: var(--text-primary);
            word-break: break-all;
        }

        .copy-btn {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
            font-size: 12px;
            margin-left: 10px;
        }

        .copy-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--text-secondary);
        }

        .copy-btn.copied {
            background: #27ae60;
            color: white;
            border-color: #27ae60;
        }
    </style>
</head>

<body>
    <div style="display: flex; height: 100vh;">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>工具库</h2>
                <button class="theme-toggle-btn" id="globalThemeToggle" title="切换主题" aria-label="切换浅色/深色主题">
                    <span class="theme-icon">🌓</span>
                </button>
            </div>
            <div class="sidebar-item" onclick="location.href='index.html'">JSON 格式化</div>
            <div class="sidebar-item" onclick="location.href='json-comparator.html'">JSON 对比</div>
            <div class="sidebar-item" onclick="location.href='text-comparator.html'">文本对比</div>
            <div class="sidebar-item" onclick="location.href='url-codec.html'">URL 编解码</div>
            <div class="sidebar-item" onclick="location.href='text-decoder.html'">文本解码</div>
            <div class="sidebar-item" onclick="location.href='datetime-converter.html'">日期时间转换</div>
            <div class="sidebar-item active" onclick="location.href='md5-hash.html'">加解密</div>
            <div class="sidebar-item" onclick="location.href='ck-extractor.html'">CK 提取</div>
            <div style="margin-top: auto; padding: 15px 20px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color); text-align: center;">
                版本: v1.0.1
            </div>
        </div>
        <div class="main-content" style="overflow: auto; background: var(--bg-secondary);">
            <div class="hash-container">
                <div class="hash-header">
                    <h1>🔐 加解密工具</h1>
                    <p>支持多种加密算法的在线加解密</p>
                </div>

                <!-- 标签页 -->
                <div class="tabs">
                    <button class="tab-btn active" onclick="switchAlgorithm('md5')">MD5</button>
                    <button class="tab-btn" onclick="switchAlgorithm('sha')">SHA</button>
                    <button class="tab-btn" onclick="switchAlgorithm('aes')">AES</button>
                    <button class="tab-btn" onclick="switchAlgorithm('des')">DES</button>
                    <button class="tab-btn" onclick="switchAlgorithm('base64')">Base64</button>
                    <button class="tab-btn" onclick="switchAlgorithm('hmac')">HMAC</button>
                </div>

                <!-- 配置选项 -->
                <div class="config-panel">
                    <div class="config-row">
                        <div class="config-item">
                            <label>编码</label>
                            <select id="encoding-select" onchange="updateHash()">
                                <option value="hex">Hex</option>
                                <option value="base64">Base64</option>
                            </select>
                        </div>
                        <div class="config-item">
                            <label>转换</label>
                            <select id="transform-select" onchange="updateHash()">
                                <option value="default">默认</option>
                                <option value="upper">大写</option>
                            </select>
                        </div>
                        <div class="config-item" id="algorithm-select-container" style="display: none;">
                            <label>算法</label>
                            <select id="algorithm-select" onchange="updateHash()">
                                <option value="SHA-1">SHA-1</option>
                                <option value="SHA-224">SHA-224</option>
                                <option value="SHA-256">SHA-256</option>
                                <option value="SHA-384">SHA-384</option>
                                <option value="SHA-512">SHA-512</option>
                                <option value="SHA3-224">SHA3-224</option>
                                <option value="SHA3-256">SHA3-256</option>
                                <option value="SHA3-384">SHA3-384</option>
                                <option value="SHA3-512">SHA3-512</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="input-area" style="position: relative;">
                    <textarea id="hash-input" placeholder="输入需要处理的文本..."></textarea>
                    <button class="paste-btn-transparent" id="pasteHashBtn" title="从剪贴板粘贴">📋</button>
                </div>

                <!-- AES/DES 参数配置 -->
                <div id="crypto-params" style="display: none; margin-bottom: 20px;">
                    <div class="config-panel">
                        <div class="config-row" style="margin-bottom: 15px;">
                            <div class="config-item">
                                <label>加密模式</label>
                                <select id="crypto-mode">
                                    <option value="CBC">CBC</option>
                                    <option value="ECB">ECB</option>
                                    <option value="CFB">CFB</option>
                                    <option value="OFB">OFB</option>
                                    <option value="CTR">CTR</option>
                                </select>
                            </div>
                            <div class="config-item">
                                <label>填充方式</label>
                                <select id="crypto-padding">
                                    <option value="Pkcs7">Pkcs7</option>
                                    <option value="Iso97971">Iso97971</option>
                                    <option value="AnsiX923">AnsiX923</option>
                                    <option value="Iso10126">Iso10126</option>
                                    <option value="ZeroPadding">ZeroPadding</option>
                                    <option value="NoPadding">NoPadding</option>
                                </select>
                            </div>
                            <div class="config-item">
                                <label>输出编码</label>
                                <select id="crypto-output">
                                    <option value="Base64">Base64</option>
                                    <option value="Hex">Hex</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                            <div style="flex: 1;">
                                <label
                                    style="display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-secondary);">密钥</label>
                                <div style="display: flex; gap: 5px;">
                                    <input type="text" id="crypto-key" placeholder="输入密钥"
                                        style="flex: 1; padding: 10px; border: 2px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);">
                                    <button class="btn-paste-inline" id="pasteKeyBtn" title="从剪贴板粘贴">📋</button>
                                </div>
                            </div>
                            <div style="flex: 1;">
                                <label style="display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-secondary);">偏移量
                                    (IV)</label>
                                <div style="display: flex; gap: 5px;">
                                    <input type="text" id="crypto-iv" placeholder="ECB模式不需要"
                                        style="flex: 1; padding: 10px; border: 2px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);">
                                    <button class="btn-paste-inline" id="pasteIvBtn" title="从剪贴板粘贴">📋</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; gap: 15px;">
                        <button onclick="encryptText()"
                            style="flex: 1; padding: 12px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">🔒
                            加密</button>
                        <button onclick="decryptText()"
                            style="flex: 1; padding: 12px; background: #27ae60; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">🔓
                            解密</button>
                    </div>
                </div>

                <!-- HMAC 配置面板 -->
                <div id="hmac-config" style="display: none; margin-bottom: 20px;">
                    <div class="config-panel">
                        <div class="config-row" style="margin-bottom: 15px;">
                            <div class="config-item">
                                <label>HMAC 算法</label>
                                <select id="hmac-algorithm" onchange="updateHMAC()">
                                    <option value="HmacMD5">HMAC-MD5</option>
                                    <option value="HmacSHA1">HMAC-SHA1</option>
                                    <option value="HmacSHA256" selected>HMAC-SHA256</option>
                                    <option value="HmacSHA224">HMAC-SHA224</option>
                                    <option value="HmacSHA512">HMAC-SHA512</option>
                                    <option value="HmacSHA384">HMAC-SHA384</option>
                                    <option value="HmacSHA3">HMAC-SHA3-512</option>
                                </select>
                            </div>
                            <div class="config-item">
                                <label>输出编码</label>
                                <select id="hmac-encoding" onchange="updateHMAC()">
                                    <option value="hex" selected>Hex</option>
                                    <option value="base64">Base64</option>
                                </select>
                            </div>
                            <div class="config-item">
                                <label>大小写</label>
                                <select id="hmac-transform" onchange="updateHMAC()">
                                    <option value="default" selected>默认</option>
                                    <option value="upper">大写</option>
                                </select>
                            </div>
                        </div>
                        <div style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-secondary);">
                                密钥 (Secret Key)
                            </label>
                            <div style="display: flex; gap: 5px;">
                                <input 
                                    type="text" 
                                    id="hmac-key" 
                                    placeholder="输入密钥"
                                    oninput="updateHMAC()"
                                    style="flex: 1; padding: 10px; border: 2px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);">
                                <button class="btn-paste-inline" id="pasteHmacKeyBtn" title="从剪贴板粘贴">📋</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="results-container" id="results"></div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="theme-toggle.js"></script>
    <script src="paste-button.js"></script>
    <script src="md5-hash.js"></script>
    <script>
        // 初始化粘贴按钮
        document.addEventListener('DOMContentLoaded', function() {
            // 主输入框粘贴按钮
            document.getElementById('pasteHashBtn').addEventListener('click', async () => {
                await PasteButton.paste('hash-input', () => {
                    // 粘贴后自动更新哈希值
                    if (typeof updateHash === 'function') {
                        updateHash();
                    }
                });
            });

            // 密钥粘贴按钮
            document.getElementById('pasteKeyBtn').addEventListener('click', async () => {
                await PasteButton.paste('crypto-key');
            });

            // IV粘贴按钮
            document.getElementById('pasteIvBtn').addEventListener('click', async () => {
                await PasteButton.paste('crypto-iv');
            });

            // HMAC 密钥粘贴按钮
            const pasteHmacKeyBtn = document.getElementById('pasteHmacKeyBtn');
            if (pasteHmacKeyBtn) {
                pasteHmacKeyBtn.addEventListener('click', async () => {
                    await PasteButton.paste('hmac-key', () => {
                        if (typeof updateHMAC === 'function') {
                            updateHMAC();
                        }
                    });
                });
            }
        });
    </script>
</body>

</html>